/* 项目库 */
<template>
  <div>
    <card>
      <p slot="title">
        项目库
      </p>
      <Row>
        <Col style="border:1px #e8eaec solid;text-align: center;padding:5px 0" span="4">总计</Col>
        <Col style="border:1px #e8eaec solid;text-align: center;padding:5px 0" span="4">{{mapList.reportNum}}个报告书{{mapList.reportTableNum}}个报告表</Col>
        <Col style="border:1px #e8eaec solid;text-align: center;padding:5px 0" span="4">项目合同额{{mapList.contractAmount}}万元</Col>
        <Col span="12">
        <Input search enter-button="搜索" style="float: right;width: 50%" v-model="searchProject" @on-search="findProject">
        </Input>
        </Col>
      </Row>
      <Table border :columns="columns1" :data="projectList" style="margin-top: 10px" :loading="projectListLoading"></Table>
      <Row style="padding:10px 0">
        <Col span="24">
        <Page style="float:right" :total="mapList.proNum" show-total @on-change="handlePage" />
        </Col>
      </Row>
      <Card>
        <p slot="title">
          地图统计
        </p>
        <Row :gutter="16">
          <Col span="12">
          <div id="allmap">
            <!-- <google-map map-type-id="hybrid" :center="center" :zoom="zoomDefault" ref="mapRef" style=" height: 500px;">
              <map-marker :position="m.position" :opacity="m.opacity" :clickable='true' @click="mapModal(m.id)" v-for="(m,index) in markers"
                :key="index">
              </map-marker> -->
              <!-- <GmapPolyline v-if="curvedPath" :path="curvedPath" /> -->
              <!-- <GmapPolyline v-if="curvedPath.length>0" v-for="(item,i) in curvedPath" :key='i+"123456"' :path="item" />
            </google-map> -->
             <div @click="tuichu" id="quan" class="tuichu">退出全屏</div>
            <baidu-map class="bm-view" :center="center" :zoom="zoomDefault" style=" width:100%;height:100%;" :scroll-wheel-zoom="true" mapType="BMAP_HYBRID_MAP">
              <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <bm-map-type :map-types="['BMAP_NORMAL_MAP', 
              'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
              <!-- <bml-marker-clusterer :averageCenter="true"> -->
                <bm-marker :position="m.position" :opacity="m.opacity"  @click="mapModal(m.id)" v-for="(m,index) in markers" :key="index"></bm-marker>
              <!-- </bml-marker-clusterer> -->
               <bm-polyline v-if="curvedPath" :path="curvedPath" ></bm-polyline>
              <bm-polyline v-if="curvedPath.length>0"  v-for="(item,i) in curvedPath" :key='i+"123456"' :path="item"></bm-polyline>
              <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama>
              
            </baidu-map>
          </div>
          </Col>
          <Col span="12">
          <Form label-position="left" :label-width="100">
            <FormItem label="报告类型：" style="padding-bottom: 20px;">
              <RadioGroup v-model="queryReportType" type="button" @on-change="changeQueryReportType">
                <Radio label="全部"></Radio>
                <Radio label="报告表"></Radio>
                <Radio label="报告书"></Radio>
                <Radio label="现状评估报告"></Radio>
                <Radio label="规划"></Radio>
                <Radio label="验收"></Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="选择地区：" style="padding-bottom: 20px;">
              <Row>
                <Col span="6" offset="1">
                <Select v-model="queryMProvince" clearable style="width:100%" placeholder="省份" @on-change="changeQueryMProvince">
                  <Option v-for="item in cityList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
                </Col>
                <Col span="6" offset="1">
                <Select v-model="queryMCity" clearable style="width:100%" placeholder="城市">
                  <Option v-for="item in cities" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
                </Col>
                <Col span="7" offset="1">
                <Button type="primary" @click="findTheMap">查找</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="项目数量：" style="padding-bottom: 20px;">
              <p>{{mapProjectNum}}个</p>
            </FormItem>
            <Button type="primary" @click="quanping">全屏显示</Button>
          </Form>
          </Col>
        </Row>
      </Card>
    </card>
    <Modal v-model="infoModel" width="700" title="项目流程单" :mask-closable="false" :styles="{top: '20px',width: '700px',height:'90%',overflowY:'scroll'}">
    <!-- <Modal v-model="infoModel" title="项目流程单" :mask-closable="false" :styles="{top: '20px',width: '700px',overflowY:'scroll'}"> -->
      <rojectProcedures v-if="infoModel" :routerId='routerId' :titleShow='false'></rojectProcedures>
    </Modal>
    <Modal v-model="modalMap" title="项目" cancel-text="" width="500" @on-ok="ok">
      <p>项目名称：{{mapUpInfo.ProjectName}}</p>
      <p>建设单位：{{mapUpInfo.BuildUnit}}</p>
      <p style="margin-bottom:10px;">报告类型：{{mapUpInfo.ReportType}}</p>
    </Modal>
  </div>
</template>

<script>
  import {formatDate} from '../../libs/tools';
  import cityList from '../../libs/city.js';
  // import * as VueGoogleMaps from 'vue2-google-maps';
  import rojectProcedures from './rojectProcedures'

  export default {
    data() {
      return {
        curvedPath: [],
        projectListLoading: true,
        cityList: cityList,
        cities: [],
        mapUpInfo: {},
        queryReportType: '',
        queryMProvince: '',
        queryMCity: '',
        // 地图弹框
        modalMap: false,
        // 地图点标记
        markers: [],
        //缩放级别
        zoomDefault: 6,
        // 地图中心城市
        center: {
          lat: 34,
          lng: 113
        },
        infoModel: false,
        mapProjectNum: 0,
        columns1: [{
            title: '序号',
            type: 'index2',
            width: 60,
            align: 'center',
            render: (h, params) => {
              return h('span', (params.index + 1) + (this.pageNum - 1) * 10);
            }
          },
          {
            title: "项目名称",
            key: "projectName",
            align: "center"
          },
          {
            title: "公司名称",
            key: "fullName",
            align: "center"
          },
          {
            title: "报告类型",
            key: "reportType",
            align: "center"
          },
          {
            title: "项目负责人",
            key: "perjectLeader",
            align: "center"
          },
          {
            title: "创建日期",
            key: "perjectTime",
            align: "center",
            render: (h, params) => {
              return h('div',
                formatDate(new Date(params.row.perjectTime), 'yyyy-MM-dd')); /*这里的this.row能够获取当前行的数据*/
            }
          },
          {
            title: "结束日期",
            key: "EntTime",
            align: "center",
            render: (h, params) => {
              return h('div',
                params.row.entTime ? formatDate(new Date(params.row.entTime), 'yyyy-MM-dd') : ''); /*这里的this.row能够获取当前行的数据*/
            }
          },
          {
            title: "环评合同额",
            align: "center",
            key: "contractAmount",
            render: (h,params)=>{
              return h('span',(params.row.contractAmount) + '万元')
            }
          },
          {
            title: "操作",
            key: "id",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        // console.log(params.row)
                        this.show(params.row.id);
                      }
                    }
                  },
                  "查看"
                )
              ]);
            }
          }
        ],
        projectList: [],
        mapList: {},
        pageNum: 1,
        proejctInfo: [],
        routerId: '',
        searchProject: '',
      };
    },
    // 地图组件
    components: {
    //   'googleMap': VueGoogleMaps.Map,
    //   'MapMarker': VueGoogleMaps.Marker,
      rojectProcedures,
    },
    methods: {
       quanping(){
        var widths = document.getElementById("allmap");
        var quan = document.getElementById("quan");
        widths.style.width = document.body.clientWidth + "px";
        widths.style.height = document.body.clientHeight + "px";
        widths.classList.add("quanping");
        quan.style.display = "block";
      }, 
      tuichu(){
        var widths = document.getElementById("allmap");
        var quan = document.getElementById("quan");
        widths.classList.remove("quanping");
        quan.style.display = "none";
        widths.style.width = 95 + "%";
        widths.style.height = 500 + "px";
      },
      updatePolylinePath (e) {
       
      },
      // 地图弹框确认按钮
      ok() {
        this.$Modal.remove();
      },
      mapModal(id) {
        axios.post('/projectInformation/mapInfo', {
          Id: id
        }).then(res => {
          console.log(res)
          if (res._STATUS == 1) {
            this.modalMap = true
            this.mapUpInfo = res.projectInfo
          } else {
            this.$Message.error('发生错误');
          }
        }).catch(err => {
          console.log(err)
        })
      },
      findTheMap() {
        this.curvedPath= []
        axios.post('/projectInformation/findProjectToMap', {
          MProvince: this.queryMProvince,
          MCity: this.queryMCity,
          ReportType: this.queryReportType,
        }).then(res => {
          if(res._STATUS==1) {
            if (res.mapList.length >= 1) {
              this.center = {
                lat: parseFloat(res.mapList[0].lat),
                lng: parseFloat(res.mapList[0].lng)
              }
              console.log(this.center);
            }
            this.markers = []
            this.mapProjectNum = res.mapList.length+res.mapList1.length;
            for (var i = 0; i < res.mapList.length; i++) {
              var dat = res.mapList[i]
              this.markers.push({
                position: {
                  lat: parseFloat(dat.lat),
                  lng: parseFloat(dat.lng)
                },
                draggable: true,
                enabled: true,
                id: dat.id
              });
            }
            console.log(this.markers);
            // 线性工程
            if(res.mapList1.length>0) {
              this.curvedPath = res.mapList1
              console.log(this.curvedPath)
              var mapList1 = res.mapList1
              mapList1.forEach(item => {
                item.forEach(e=>{
                  this.markers.push({
                    position: {
                      lat: e.lat,
                      lng: e.lng
                    },
                    id: e.id
                  })
                })
              });
            }
            console.log(this.markers);
          }
        }).catch(err => {
          console.log(err);
        })
      },
      changeQueryMProvince(val) {
        this.queryMCity = '';
        for (var i = 0; i < this.cityList.length; i++) {
          if (val == this.cityList[i].name) {
            this.cities = this.cityList[i].cityList;
          }
        }
      },
      changeQueryReportType(value) {
        if (value == '全部') {
          this.queryReportType = '';
          this.queryMProvince = '';
          this.queryMCity = '';
          this.findTheMap();
        } else {
          this.queryReportType = value;
        }
      },
      findProject() {
        this.projectListLoading = true;
        axios.post('/projectInformation/findProject', {
            PageIndex: this.pageNum - 1,
            SearchProject: this.searchProject,
          })
          .then((res) => {
            // console.log(res.projectList)
            this.projectList = res.projectList;
            this.mapList = res.map;
            this.projectListLoading = false;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      handlePage(value) {
        this.pageNum = value
        this.findProject();
      },
      show(val) {
        this.infoModel = true;
        this.routerId = val
        // console.log(this.routerId)
        // axios.post('/audit/findSubmitTime', {
        //     Project_id: val
        //   })
        //   .then((res) => {
        //     this.proejctInfo = res.data;
        //     console.log(res)
        //     this.routerId = val
        //   })
        //   .catch(function (error) {
        //     console.log(error);
        //   });
      }
    },
    mounted() {
      this.findProject();
      this.findTheMap();
    }
  };
</script>

<style lang="less" scoped>
  #allmap {
    margin: auto;
    width: 95%;
    height: 500px;
    overflow: hidden;
  }
   .tuichu{
    position: absolute;
    right: 30px;
    top: 25%;
    width: 80px;
    height: 20px;
    background: #fff;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #eee;
    z-index: 1000;
    display: none;
  }
  .quanping{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
      .ivu-col-offset-1{
      margin-left:0 !important;
      margin-right: 10px !important; 
    }
    .bm-view {
      width: 100%;
      height: 300px;
      
    }
</style>
